<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>回调函数</title>
     <style>
        table, th, td {
            border: 1px solid red;
        }

        table {
            width: 100%;
            border-collapse: collapse;
        }

        th, td {
            height: 30px;
        }

        tbody tr:hover {
            background-color: blue!important;
            color: #fff;
        }

        tbody tr:nth-child(2n) {
            background-color: #ccc;
        }
    </style>
</head>
<body>
 <button id="Btn">send</button>
    <hr>

    <table id="myTable">
        <thead>
            <tr>
                <th>用户名</th>
                <th>姓名</th>
                <th>年龄</th>
                <th>性别</th>
                <th>手机号</th>
                <th>操作</th>
            </tr>
        </thead>

        <tbody></tbody>
    </table>

     <script src='function.js'></script>
     <script>
         !function(){
                 var Btn = document.getElementById('Btn').onclick = function(){
                    ajax('get','user.json',render);
                 }
                var render = function(response) {
                var table = document.querySelector('table');
                var trStr = '';
                var trArr = [];
                var i;
                var data = response.data;
                var list = data.list;
                var total = data.total;
                var len = list.length;

                for (i=0; i<len; i++) {
                    trArr.push(
                        '<tr data-index="', i, '">', 
                            '<td>', list[i].username, '</td>', 
                            '<td>', list[i].name, '</td>', 
                            '<td>', list[i].age, '</td>', 
                            '<td>', list[i].gender, '</td>', 
                            '<td>', list[i].mobile, '</td>',
                            '<td>', 
                                '<button data-uid="', list[i].id, '" data-name="', list[i].name, '" class="del-btn">删除</button>',
                                '<button>修改</button>',
                                '<button>查看</button>',
                            '</td>',
                        '</tr>'
                    );
                }

                table.getElementsByTagName('tbody')[0].innerHTML = trArr.join('');
            };

         }();
     </script>
</body>
</html>